<template>
    <mavon-editor
        :placeholder="placeholder"
        :style="{zIndex: 998, ...extraStyle}"
        :toolbars="editorToolbar"
        :ishljs="true"
        @change="editorChange"
        v-model="myContent"
        @imgAdd="onImgAdd"
    />
</template>
<script>
import Vue from 'vue'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
Vue.use(mavonEditor)
import { upload } from '@/api/source'

export default {
    name: 'Editor',
    props: {
        content: {
            type: String,
            default: ""
        },
        editorChange: Function,
        editorToolbar: {
            type: Object,
            default() {
                return {
                    bold: true, // 粗体
                    italic: true, // 斜体
                    header: true, // 标题
                    underline: true, // 下划线
                    strikethrough: true, // 中划线
                    mark: true, // 标记
                    superscript: true, // 上角标
                    subscript: true, // 下角标
                    quote: true, // 引用
                    ol: true, // 有序列表
                    ul: true, // 无序列表
                    link: true, // 链接
                    imagelink: true, // 图片链接
                    code: true, // code
                    table: true, // 表格
                    fullscreen: false, // 全屏编辑
                    readmodel: true, // 沉浸式阅读
                    htmlcode: true, // 展示html源码
                    help: false, // 帮助
                    /* 1.3.5 */
                    undo: true, // 上一步
                    redo: true, // 下一步
                    trash: false, // 清空
                    save: false, // 保存（触发events中的save事件）
                    /* 1.4.2 */
                    navigation: true, // 导航目录
                    /* 2.1.8 */
                    alignleft: true, // 左对齐
                    aligncenter: true, // 居中
                    alignright: true, // 右对齐
                    /* 2.2.1 */
                    subfield: true, // 单双栏模式
                    preview: true, // 预览
                }
            }
        },
        placeholder: {
            type: String,
            default: ' '
        },
        extraStyle: {
            type: Object,
            default: () => ({})
        }
    },
    data() {return {
        myContent: this.content
    }},
    methods: {
        onImgAdd(filename, fileobj) {
            upload({base64: fileobj.miniurl}).then(res => {
                const fileurl = `/source/${res.data.id}`
                console.log('filename:', filename, 'fileurl:', fileurl);
                this.myContent = this.myContent.replace(`![image.png](${filename})`, `![${filename}](${fileurl})`)
            }).catch(e => {
                console.error('上传图片出现问题：', e);
            })
        }
    },
    watch: {
        content(v) {
            this.myContent = v
        },
        myContent(v) {
            this.$emit('update:content', v)
        }
    }
}
</script>
